<template>
	<view>
		<u-navbar back-text="首页" :customBack="back" backIconName=" " :backTextStyle="backTextColor"
			backIconColor="#39CCCC" :background="background">
			<view class="search-wrap" @click="toSearch">
				<u-search height="56" :showAction="false"></u-search>
			</view>
		</u-navbar>
		<!-- swiper -->
		<view class="home u-p-b-0">
			<!-- <u-swiper :vertical="false" :list="swiperlist"></u-swiper> -->
			<view class="u-p-t-20">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in categoryList" :key="index" @click="toList(item)">
						<u-image :src="item.image" width="100" height="100"></u-image>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 大道至简 所以我把下面的注释了 -->
			<!-- news -->
			<!-- <view class="u-p-t-20">
				<view class="u-flex u-row-between">
					<view class="title">热门推荐</view>
					<u-icon name="arrow-right" size="24" color="#39CCCC" labelPos="left" marginRight="10" label="全部"
						labelSize="24" labelColor="#39CCCC"></u-icon>
				</view>
				<view v-for="(item,index) in 2" :key="index" class="u-flex u-row-between u-m-b-20 u-m-t-10">
					<u-image width="48.5%" height="165" borderRadius="12"
						src="http://img.wxcha.com/file/201902/25/9625e1758b.jpg">
					</u-image>
					<u-image width="48.5%" height="165" borderRadius="12"
						src="http://img.wxcha.com/file/201902/25/9625e1758b.jpg">
					</u-image>
				</view>
			</view> -->
		</view>
		<!-- list 瀑布流-->
		<view class="f7">
			<view class="fw u-m-l-20 u-m-t-30">为你推荐</view>
			<wallList :list="list" :show_wf="show_wf"></wallList>
		</view>
		<!-- 回到顶部按钮 -->
		<view>
			<u-back-top :scrollTop="scrollTop" :mode="modeTop" :bottom="bottomTop" :right="rightTop" :top="top"
				:icon="iconTop" :custom-style="customStyle" :icon-style="iconStyleTop" :tips="tips">
			</u-back-top>
		</view>
	</view>
</template>

<script>
	import config from '../../uview-ui/libs/config/config';
	import wallList from '@/components/list';
	
	export default {
		components: {
			wallList
		},
		data() {
			return {
				// top
				scrollTop: 0,
				modeTop: 'circle',
				bottomTop: 200,
				rightTop: 40,
				top: 400,
				iconTop: 'arrow-up',
				iconStyleTop: {
					color: '#111',
					fontSize: '36rpx'
				},
				customStyle: {
					backgroundColor: '#fff',
					color: '#111'
				},
				tips: '顶部',
				page: 1,
				rowSize: 4,
				background: this.TopColor,
				backTextColor: {
					'color': '#ffffff'
				},
				categoryList: [{
					name: '最新',
					image: '/static/new.png',
					url: '/pages/index/list'
				}, {
					name: '热门',
					image: '/static/hot.png',
					url: '/pages/index/list'
				}, {
					name: '发现',
					image: '/static/blink.png',
					url: '/pages/index/list'
				}, {
					name: '分类',
					image: '/static/category.png',
					url: '/pages/index/category'
				}],
				swiperlist: [{
					image: 'https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[483].jpg',
				}, {
					image: 'https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[480].jpg',
				}, {
					image: 'https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[484].jpg',
				}, ],
				list: [
				],
				show_wf:true
			}
		},
		onLoad() {
			this.apiList()
		},
		onTabItemTap(){
			this.refresh();
		},
		methods: {
			back() { // 首页
				uni.navigateBack({
					delta: 2
				})
			},
			refresh(){
				this.list = [];
				this.page = 1;
				this.rowSize = 4;
				this.show_wf = !this.show_wf;
				if(this.show_wf == false){
					setTimeout(() => {
						this.show_wf = true;
						this.apiList();
					},200)
				}else{
					this.apiList();
				}
				
			},
			apiList() {
				// console.log("aaa...")
				this.$api.post("/kim/toMarkerImgPage.action",{"RowStart":0+(this.page - 1) * this.rowSize,"RowSize":this.rowSize}).then(res => {
					console.log("res:",res);
					for (let i = 0; i < res.data.length; i++) {
						let item = {
							name: res.data[i].markerName + "    " + res.data[i].pkgTime,
							image: this.$db.domain() + '/pkg/web/' + res.data[i].pkgID
						}
						this.list.push(item);
					}
				});
			},
			toList(item) {
				if(item.name == "最新"){
					this.refresh();
				}else{
					this.$common.navigateTo(item.url)
				}
			},
			toSearch() {
				this.$common.navigateTo('/pages/index/search')
			},
			onReachTop(){
				this.rowSize = 10;
				this.page = 1;
				this.list = [];
				this.apiList();
			},
			onReachBottom() {
				this.rowSize = 10;
				setTimeout(() => {
					this.page++;
					this.apiList();
				}, 500);
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
			
		}
	}
</script>

<style lang="scss">
	.search-wrap {
		margin: 0 30rpx 0 10rpx;
		flex: 1;
	}

	.grid-text {
		font-size: 20rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.title {
		font-weight: bold;
		font-size: 30rpx;
		padding-bottom: 20rpx;
	}
	
	.fw{
		font-weight: bold;
	}

	.f7 {
		background-color: #f7f7f7;
	}
</style>
